<template>
	<!-- 首页 -->
	<view class="content">

		<view class="content_top">
			<view class="con">
				<!-- 旺仔店铺 -->
				<view class="h1">旺仔店铺</view>
				<!-- 旺仔店铺 -->

				<!-- 搜索框 -->
				<view class="sousuo">
					<image src="../../static/img/search.png" mode="widthFix"></image>
					<input type="text">
				</view>
				<!-- 搜索框 -->

				<!-- 轮播图 -->
				<view class="slide" v-show="index===current" v-for="(item,index) in list[1].configureAttribute"
					:key="index">
					<image :src="item.singleBackgroundURL" mode="widthFix"></image>
					<view class=" pic">
						<image :src="item.pictureURL" mode="widthFix"></image>
					</view>
				</view>
				<!-- 轮播图 -->


				<!-- 商品列表 -->
				<view class="list">
					<view class="lisr_con">
						<view class="li" v-for="(item,index) in list[2].configureAttribute" :key="index">
							<view class="img">
								<image :src="item.pictureURL" mode="widthFix"></image>
							</view>
							<view class="p">{{item.pictureName}}</view>
						</view>
					</view>
				</view>
				<!-- 商品列表 -->
			</view>
		</view>


		<!-- 新人专享 -->
		<view class="Newborn_Zone">
			<image :src="list[3].configureAttribute[0].pictureURL" mode="widthFix"></image>
		</view>
		<!-- 新人专享 -->


		<!-- 每日秒杀 -->
		<view class="Daily_Seckill">
			<view class="time">
				<!-- 修改颜色 -->
				<!-- <uni-countdown color="#FFFFFF" background-color="#aaadfc" border-color="#00B26A" :day="1" :hour="2"
					:minute="30" :second="0"></uni-countdown> -->
			</view>
			<image :src="list[4].pictureURL" mode="widthFix"></image>
		</view>
		<!-- 每日秒杀 -->



		<!-- 领卷中心 -->
		<view class="Collar_roll">
			<view class="li_img" v-for="(item,index) in list[5].configureAttribute" :key="index">
				<image :src="item.pictureURL" mode="widthFix"></image>
			</view>
		</view>
		<!-- 领卷中心 -->


		<!-- 组合大礼包 -->
		<view class="Combination_gift_pack">
			<view class="li_img" v-for="(item,index) in list[6].configureAttribute" :key="index">
				<image :src="item.pictureURL" mode="widthFix"></image>
			</view>
		</view>


		<!-- 公告 -->
		<view class="Notice">
			<image :src="list[7].configureAttribute[0].pictureURL" mode="widthFix"></image>
		</view>
		<!-- 公告 -->


		<!-- 为你推荐 -->
		<view class="Recommended_for_you">
			<image :src="list[8].configureAttribute[0].pictureURL" mode="widthFix"></image>
		</view>
		<!-- 为你推荐 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 定义是否显示组件
				showLoading: false,
				list: [],
				current: 0, //高亮的元素
			}
		},
		onLoad() {
			this.getJok() //显示当前页数的内容
			this.switchs()
		},
		methods: {
			// 设置定时器，显示两秒后消失！
			switchs() {
				setInterval(() => {
					this.current++;
					if (this.current >= this.list[1].configureAttribute.length) {
						this.current = 0;
					}
				}, 2500)
			},
			getJok() {
				var that = this
				uni.request({
					url: 'https://srv.hotkidceo.com/appapi/api/root-ceo-content/hpPageConfigure/pageList',
					data: {
						"channelId": "C06022632001",
						"memberKey": 33755543
					},
					success: (res) => {
						console.log("res", res.data);
						var r = res.data.data;
						that.list = that.list.concat(r)
						console.log("list", that.list);
					},
					method: 'POST',
				})
			}
		}
	}
</script>

<style lang="less">
	@width: (100vw / 375);

	.content {
		/* 状态栏（电量条的高度） */
		padding-top: var(--status-bar-height);
		width: 100vw;
		padding-bottom: 50 * @width;
		background-color: #f7f7f7;

		.content_top {
			width: 100%;
			height: 356 * @width;

			.con {
				position: relative;
				width: 100%;
				height: 100%;

				.h1 {
					position: absolute;
					z-index: 999;
					height: 46 * @width;
					line-height: 46 * @width;
					padding-left: 15 * @width;
					color: #fff;
				}

				.sousuo {
					position: absolute;
					top: 50 * @width;
					z-index: 999;
					width: 100%;
					height: 41 * @width;
					padding: 4 * @width 18 * @width;
					box-sizing: border-box;

					input {
						background-color: #fff;
						height: 33 * @width;
						border-radius: 16.5 * @width;
						padding-left: 40 * @width;
					}

					image {
						width: 17 * @width;
						height: 17 * @width;
						position: absolute;
						top: 50%;
						left: 28 * @width;
						transform: translateY(-50%);
					}
				}

				.slide {
					position: absolute;
					width: 100vw;
					height: 100%;

					>image {
						position: absolute;
						top: -50 * @width;
						width: 100%;
						height: 100%;
					}

					.pic {
						width: 100%;
						padding: 0 18 * @width;
						box-sizing: border-box;
						position: absolute;
						top: 105 * @width;
						left: 50%;
						z-index: 999;
						transform: translateX(-50%);

						image {
							border-radius: 15 * @width;
							width: 100%;
						}
					}
				}


				// 隐藏滚动条并可以滚动内容
				.list::-webkit-scrollbar {
					width: 0 !important;
				}

				.list {
					overflow: scroll;
					position: absolute;
					top: 250 * @width;
					left: 50%;
					transform: translateX(-50%);
					border-radius: 15 * @width;
					width: 348 * @width;
					height: 195 * @width;
					background-color: #fff;
					padding: 14 * @width 10 * @width;
					padding-bottom: 0;
					box-sizing: border-box;
					box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;

					.lisr_con {
						width: 540 * @width;
						display: flex;
						flex-wrap: wrap;

						.li {
							padding: 3 * @width 5 * @width;
							text-align: center;


							.img {
								image {
									width: 54 * @width;
								}
							}

							.p {
								font-size: 14 * @width;
								color: #87888c;
							}
						}

						.li:nth-of-type(n+8) {
							padding-bottom: 0px;
						}
					}
				}

			}
		}


		// 新人专享
		.Newborn_Zone {
			margin-top: 100 * @width;
			width: 100%;
			padding: 0 15 * @width;
			box-sizing: border-box;

			image {
				border-radius: 20 * @width;
				width: 100%;
			}
		}

		// 新人专享



		// 每日秒杀
		.Daily_Seckill {
			position: relative;
			width: 100%;
			padding: 0 15 * @width;
			box-sizing: border-box;

			image {
				width: 100%;
			}

			.time {
				position: absolute;
				top: 15 * @width;
				left: 110 * @width;
				z-index: 999;
			}
		}

		// 每日秒杀



		// 领卷中心
		.Collar_roll {
			margin-top: 10 * @width;
			display: flex;
			justify-content: space-between;
			margin: 0 15 * @width;
			margin-top: 10 * @width;
			background-color: #fff;
			box-sizing: border-box;

			.li_img image {
				width: 138* @width;
				height: 93 * @width;
			}

			.li_img:nth-of-type(3) image {
				width: 58 * @width;
			}

		}

		// 领卷中心



		// 组合大礼包
		.Combination_gift_pack {
			margin-top: 10 * @width;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			box-sizing: border-box;
			margin: 10 * @width 15 * @width;
			background-color: #fff;
			border-radius: 10 * @width;

			.li_img {
				image {
					width: 156* @width;
				}
			}

			.li_img:nth-of-type(1) image {
				width: 345 * @width;
			}
		}

		// 组合大礼包



		// 公告
		.Notice {
			width: 345 * @width;
			margin: 0 15 * @width;

			image {
				width: 100%;
			}
		}

		// 公告



		// 为你推荐
		.Recommended_for_you {
			width: 345 * @width;
			margin: 10 * @width 15 * @width;

			image {
				width: 100%;
			}
		}

		// 为你推荐
	}
</style>
